<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息 - 超市系统</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/profile.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="/js/jquery-1.12.4.min.js"></script>
    <link rel="icon" href="/photo/Profile picture/log.ico" type="image/x-icon">
</head>
<body>

     <main class="profile-page" id="app">
        <div class="profile-container">
            <div class="profile-header">
                <h1>个人信息</h1>
            </div>
            <div class="profile-content">
                <div class="profile-avatar-section">
                    <div class="profile-avatar">
                        <img id="profileAvatar" src="photo\Profile picture\logo.png" alt="用户头像">
                        <div class="avatar-upload">
                            <label for="avatarInput" class="upload-btn">
                                <i class="fas fa-camera"></i> 更换头像
                            </label>
                            <input type="file" id="avatarInput" accept="image/*" style="display: none;">
                        </div>
                    </div>
                </div>
                <div class="profile-info-section">
                    <div class="info-group">
                        <h2>基本信息</h2>
                        <div class="info-item">
                            <label>用户名</label>
                            <span id="profileUsername"></span>
                        </div>
                        <div class="info-item">
                            <label>性别</label>
                            <span id="profileGender"></span>    
                        </div>
                        <div class="info-item">
                            <label>手机号</label>
                            <div class="phone-display">
                                <span id="profilePhone"></span>
                                <button class="toggle-phone-btn" onclick="togglePhoneDisplay()">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="info-group">
                        <h2>账户安全</h2>
                        <div class="info-item">
                            <button class="change-password-btn">
                                <i class="fas fa-lock"></i> 修改密码
                            </button>
                        </div>
                    </div>
                    <div class="info-group">
                        <h2>收货地址</h2>
                        <div class="info-item">
                            <button class="add-address-btn" onclick="location.href='address-ai.html'">
                                管理收货地址
                            </button>
                        </div>
                    </div>
                    <div class="info-group">
                        <h2>我的优惠券</h2>
                        <div class="info-item">
                            <button class="manage-coupons-btn" onclick="location.href='coupons-ai.html'">
                                <i class="fas fa-gift"></i> 查看优惠券
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script src="js/profile.js"></script>
</body>
</html> 